<template>
  <div id="myPurchase-detail">
    <div class="filter-box">
      <div class="top-box">
        <div class="box-title">银行</div>
      </div>
      <a-form-model :model="form" :rules="rules" ref="form">
        <a-row class="info">
          <a-col :span="8">
            <a-form-model-item label="银行编号" ref="code" class="form-col" prop="code">
              <a-input v-model="form.code" placeholder="请输入银行编号" style="width: 250px;"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="银行名称" ref="name" class="form-col" prop="name">
              <a-input v-model="form.name" placeholder="请输入银行名称" style="width: 250px;"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="省" ref="province" class="form-col" prop="province">
              <a-select v-model="form.province" placeholder="请输入省" style="width: 250px;" allowClear showSearch @change="getCity">
                <a-select-option v-for="option in province" :key="option.label" :value="option.value">{{option.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="info">
          <a-col :span="8">
            <a-form-model-item label="市" ref="city"  class="form-col" prop="city">
              <a-select v-model="form.city" style="width: 250px;" allowClear showSearch placeholder="请选择市" @change="getArea">
                <a-select-option v-for="option in city" :key="option.label" :value="option.value">{{option.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="开户地区" ref="bankarea" class="form-col" prop="bankarea">
              <a-input v-model="form.bankarea" placeholder="请输入开户地区" style="width: 250px;"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="人行联行行号" ref="pkCombine" class="form-col" prop="pkCombine">
              <a-input-number v-model="form.pkCombine" placeholder="请输入人行联行行号" style="width: 250px;"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="info">
          <a-col :span="8">
            <a-form-model-item label="启用状态" ref="enablestate" class="form-col" prop="enablestate">
              <a-select v-model="form.enablestate" style="width: 250px;" placeholder="请选择状态">
                <a-select-option :value="2">{{"启用"}}</a-select-option>
                <a-select-option :value="3">{{"禁用"}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item>
          <div class="footer-btns">
            <a-button type="primary" @click="goBack">返回</a-button>
            <a-button type="primary" @click="handleSubmit">提交</a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
@Component
export default class Ground extends Vue {
  $refs!: {form: HTMLFormElement}
  form: any = {
    code: undefined,
    name: undefined,
    province: undefined,
    bankarea: undefined,
    city: undefined,
    dr: 0,
    pkCombine: undefined,
    enablestate: 2
  }
  rules: any = {
    code: [{ required: true, message: '请输入银行编号', trigger: 'blur'}],
    name: [{ required: true, message: '请输入银行名称', trigger: 'blur'}],
    province: [{ required: true, message: '请选择省', trigger: 'change'}],
    city: [{ required: true, message: '请选择市', trigger: 'change'}],
    pkCombine: [{ required: true, message: '请输入人行联行行号', trigger: 'blur'}]
  }
  province: any[] = []
  city: any[] = []
  formVisible: boolean = false;
  // 关闭弹窗
  hideFormVisible () {
    this.formVisible = false;
  }
  get bankdocId () {
    return this.$route.query.pkBankdoc
  }
  // 返回键
  goBack () {
    this.$router.back()
  }
  handleSubmit () {
    this.$refs['form'].validate((valid: any) => {
   if (valid) {
    this.form.province = this.form.province.split('-')[1]
    this.form.city = this.form.city.split('-')[1]
    let data: any = this.form
    // alert(JSON.stringify(this.form))
    this.$api.bankdocAddBankdocFetch(data).then((res: any) => {
      this.$message.success('保存成功！')
       this.$router.back()
     })
   } else {
       console.log('error submit!!');
       return false;
       }
   });
  }
  init () {
    this.getDetail()
    this.getProvince()
  }
  // 获取详情
  getDetail () {
    let data = {
      phid: this.bankdocId
    }
    if (data.phid) {
      this.$api.bankdocDetailFetch(data).then((res: any) => {
      this.form = res.data
    });
    }
  }
  getProvince () {
    this.$api.regionProvinceListFetch().then((res: any) => {
      res.data.map((item: any) => { item.label = item.province; item.value = item.areaId + '-' + item.province; this.initCity(item.areaId) })
      this.province = res.data
      // alert(JSON.stringify(res.data))
    });
  }
  getCity (val: any) {
    // alert(val);
    let data = {
      parent_id: val.split('-')[0]
    }
    this.$api.regionCityListFetch(data).then((res: any) => {
      res.data.map((item: any) => { item.label = item.city; item.value = item.areaId + '-' + item.city; })
      this.city = res.data
    });
  }
  initCity (parentId: any) {
    if (this.form.province) {
      let data = {
      parent_id: parentId
    }
      this.$api.regionCityListFetch(data).then((res: any) => {
      res.data.map((item: any) => { item.label = item.city; item.value = item.areaId + '-' + item.city; })
      this.city = res.data
    });
    }
  }
  getArea (val: any) {
    let area = val.split('-')[1]
    this.form.bankarea = area
  }
}
</script>

<style lang="scss" scoped>
#myPurchase-detail {
    .top-box{
      margin-bottom: 15px;
        .box-title{
            font-size: 16px;
            font-weight: 700;
            padding-left: 5px;
            color: #000;
            height: 15px;
            line-height: 15px;
            border-left: 3px solid rgb(62, 149, 231);
        }
    }
    .info{
        padding: 10px 0;
        .address{
          display: flex;
        }
        .info-left{
            width: 65px;
            margin-right: 10px;

        }
    }
    .container-title{
      font-size: 16px;
      font-weight: 700;
      padding-left: 5px;
      color: #000;
      height: 15px;
      line-height: 15px;
      border-left: 3px solid rgb(62, 149, 231);
    }
    .title-info{
      margin: 20px 0;
      font-size: 16px;
      .info-left{
        font-weight: 700;
      }
      .info-right{
        margin-right: 80px;
      }
    }
    .header-item{
      text-align: center;
    }
    .footer-btns {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50px 0;
      .ant-btn {
        margin-right: 20px;
      }
    }
}
/deep/ .ant-select-selection-selected-value, .ant-input[disabled]{
  color: rgba(0, 0, 0, 0.8);
}
/deep/ .ant-input-number-input{
   color: rgba(0, 0, 0, 0.8) ;
 }
</style>
